<template>
    <div class="teacher-dashboard">
        <!-- 数据概览卡片 -->
        <el-row :gutter="20" class="data-overview">
            <el-col :span="6">
                <el-card shadow="hover" class="data-card">
                    <template #header>
                        <div class="card-header">
                            <span>待批改作业</span>
                            <el-tag type="warning">紧急</el-tag>
                        </div>
                    </template>
                    <div class="card-content">
                        <h2>{{  toEvaluateHomeworkCount }}</h2>
                        <p>份作业待批改</p>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="data-card">
                    <template #header>
                        <div class="card-header">
                            <span>本周作业</span>
                            <el-tag type="success">进行中</el-tag>
                        </div>
                    </template>
                    <div class="card-content">
                        <h2>{{ myHomeworkCount }}</h2>
                        <p>个进行中的作业</p>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="data-card">
                    <template #header>
                        <div class="card-header">
                            <span>学生总数</span>
                            <el-tag type="info">统计</el-tag>
                        </div>
                    </template>
                    <div class="card-content">
                        <h2>{{ myStudentsCount }}</h2>
                        <p>名在读学生</p>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="data-card">
                    <template #header>
                        <div class="card-header">
                            <span>作业完成率</span>
                            <el-tag type="primary">统计</el-tag>
                        </div>
                    </template>
                    <div class="card-content">
                        <h2>{{ finishHomeworkRate }}%</h2>
                        <p>平均完成率</p>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 主要内容区域 -->
        <el-row :gutter="20" class="main-content">
            <!-- 待办事项 -->
            <el-col :span="12">
                <el-card class="todo-list">
                    <template #header>
                        <div class="card-header">
                            <span>待办事项</span>
                            <el-button type="primary" size="small" disabled>添加待办</el-button>
                        </div>
                    </template>
                    <el-timeline>
                        <el-timeline-item v-for="(todo, index) in todoList" :key="index" :type="todo.type"
                            :timestamp="todo.time">
                            {{ todo.content }}
                        </el-timeline-item>
                    </el-timeline>
                </el-card>
            </el-col>

            <!-- 最近活动 -->
            <el-col :span="12">
                <el-card class="recent-activities">
                    <template #header>
                        <div class="card-header">
                            <span>最近活动</span>
                        </div>
                    </template>
                    <el-table :data="recentActivities" style="width: 100%">
                        <el-table-column prop="time" label="时间" width="180" />
                        <el-table-column prop="student" label="学生" width="120" />
                        <el-table-column prop="action" label="活动" />
                        <el-table-column prop="status" label="状态" width="100">
                            <template #default="scope">
                                <el-tag :type="scope.row.status === '已完成' ? 'success' : 'warning'">
                                    {{ scope.row.status }}
                                </el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores'
import { getMyStudentsAPI, getMyHomeworkAPI, getStudentHomeworkAPI } from '@/api/teacher'
const userStore = useUserStore()
// 待办事项数据
const todoList = ref([
    {
        content: '批改高数作业',
        time: '今天 14:00',
        type: 'warning'
    },
    {
        content: '准备下周课程',
        time: '明天 10:00',
        type: 'primary'
    },
    {
        content: '学生答疑',
        time: '明天 15:00',
        type: 'success'
    }
])

// 最近活动数据
const recentActivities = ref([
    {
        time: '2024-03-20 10:30',
        student: '张三',
        action: '提交了高数作业',
        status: '已完成'
    },
    {
        time: '2024-03-20 09:15',
        student: '李四',
        action: '提交了物理作业',
        status: '待批改'
    },
    {
        time: '2024-03-19 16:45',
        student: '王五',
        action: '提交了化学作业',
        status: '已完成'
    }
])
const toEvaluateHomeworkCount = ref(0) // 待批改作业
const myStudentsCount = ref(0) // 我的学生
const myHomeworkCount = ref(0) // 布置作业
const finishHomeworkRate = ref(0) // 完成作业率
const getMyStudents = async () => {
    const { data } = await getMyStudentsAPI()
    if (data.code === 200) {
        myStudentsCount.value = data.data.length
    } else if (data.code === 500) {
        ElMessage.error(data.msg)
    } else {
        ElMessage.error(data.msg)
    }
}
const getMyHomework = async () => {
    const { data } = await getMyHomeworkAPI()
    if (data.code === 200) {
        myHomeworkCount.value = data.data.length
    } else if (data.code === 500) {
        ElMessage.error(data.msg)
    } else {
        ElMessage.error(data.msg)
    }
}
const getStudentHomework = async () => {
    const { data } = await getStudentHomeworkAPI()
    if (data.code === 200) {
        toEvaluateHomeworkCount.value = data.data.length
    } else if (data.code === 500) {
        ElMessage.error(data.msg)
    } else {
        ElMessage.error(data.msg)
    }
}
onMounted(() => {
    Promise.all([getMyStudents(), getMyHomework(), getStudentHomework()]).then(() => {
        finishHomeworkRate.value = (toEvaluateHomeworkCount.value / myHomeworkCount.value) * 100
    })
})
</script>

<style scoped>
.teacher-dashboard {
    padding: 20px;
}

.data-overview {
    margin-bottom: 20px;
}

.data-card {
    height: 160px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-content {
    text-align: center;
    padding: 20px 0;
}

.card-content h2 {
    font-size: 28px;
    margin: 0;
    color: #303133;
}

.card-content p {
    margin: 10px 0 0;
    color: #909399;
}

.main-content {
    margin-top: 20px;
}

.todo-list,
.recent-activities {
    height: 500px;
}

.el-timeline {
    padding: 20px;
}

:deep(.el-card__header) {
    padding: 15px 20px;
    border-bottom: 1px solid #ebeef5;
    background-color: #f5f7fa;
}

:deep(.el-card__body) {
    padding: 20px;
}
</style>